<template>
  <div class="docs-container">
    <el-card class="docs-card">
      <template #header>
        <div class="card-header">
          <span>项目文档</span>
          <el-select v-model="currentDoc" placeholder="选择文档" size="small" @change="onDocChange">
            <el-option v-for="doc in docs" :key="doc.value" :label="doc.label" :value="doc.value" />
          </el-select>
        </div>
      </template>
      <div class="markdown-body" v-html="contentHtml"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { marked } from 'marked'

// 文档清单（与 public/docs 同步）
const docs = [
  { label: '代码结构总览', value: '/docs/README.md' },
  { label: '前端路由与导航', value: '/docs/ROUTER.md' },
  { label: '状态管理（Pinia）', value: '/docs/STORE.md' },
  { label: 'API 与请求封装', value: '/docs/API.md' },
  { label: 'UI 组件与指令', value: '/docs/UI.md' },
  { label: '视图模块说明', value: '/docs/VIEWS.md' },
]

const currentDoc = ref(docs[0].value)
const content = ref('')
const contentHtml = computed(() => marked.parse(content.value || ''))

const fetchDoc = async (path: string) => {
  try {
    const res = await fetch(path)
    if (!res.ok) throw new Error('获取文档失败')
    content.value = await res.text()
  } catch (e: any) {
    ElMessage.error(e.message || '加载文档失败')
  }
}

const onDocChange = (val: string) => {
  fetchDoc(val)
}

onMounted(() => {
  fetchDoc(currentDoc.value)
})
</script>

<style scope lang="scss">
.docs-container {
  padding: 16px;
}
.docs-card {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.markdown-body {
  padding: 8px 0;
}
</style>


